<!--
选择地区
value   =====>   双向数据绑定，v-model
-->
<template>
  <a-cascader
      :field-names="fieldNames"
      :placeholder="placeholder"
      :options="options"
      v-model:value="defaultValue"
      @change="onChange"
  />
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
// 省市区数据来自：https://github.com/uiwjs/province-city-china
// 感谢博主提供：https://www.asni.cn/2217
import provinces from './level.json'
const emit = defineEmits(['change', 'update:value'])
const props = defineProps({
  value: {
    type: [Array, null],
    default: null
  },
  index: {
    type: Number,
    default () {
      return 0
    }
  },
  fieldNames: {
    type: Object,
    default () {
      return { label: 'name', value: 'name', children: 'children' }
    }
  },
  placeholder: {
    type: String,
    default: '请选择所在区域'
  },
})
const options = ref(provinces)
const defaultValue = ref([])

watch(() => props.value, (curr, old) => {
  defaultValue.value = curr
})

onMounted(() => {
  defaultValue.value = props.value
})

const onChange = (value,selectedOptions) => {
  emit('update:value', value)
  emit('change', value, selectedOptions)
}

</script>
